<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="迅傲DEMO">
  <meta name="author" content="Zentao">

  <title>移动端图片压缩上传</title>

  <link href="/docs/css/zui.min.css" rel="stylesheet">
  <link href="/docs/css/doc.css" rel="stylesheet">
</head>
<body>
  <header data-tab="html5">
  </header>
  <div id="main">
  	<div class="page-header">
        <h1>移动端图片压缩上传</h1>
    </div>
    <section id="hello">
		<div class="page-header">
          <h2>说明</h2>
        </div>
        <p>移动端图片压缩上传的核心是使用canvas对图片进行了重绘，并将图片转为base64代码进行上传。</p>
        <p>所以接收端需要对文件进行处理后才能使用。</p>
<pre class="prettyprint">
&lt;?php
$base64 = $_POST['formFile'];
$IMG = base64_decode( $base64 );
$fn = (isset($_POST['name']) ? $_POST['name'] : false);
file_put_contents(
        'upload/' . $fn,
        $IMG
    );
echo $fn;
?&gt;
</pre>
<div class="page-header">
          <h2>演示</h2>
        </div>
      </section>
    <div class="jumbotron text-center">
    	<p></p>
      <button class="btn btn-lg btn-primary" id="upload">点击上传</button><input type="file" id="upload_input" style="visibility:hidden;">
    </div>
  </div>

  <script src="/assets/jquery.js"></script>
  <script src="/dist/js/zui.min.js"></script>
  <script src="/assets/google-code-prettify/prettify.js"></script>
  <script src="/docs/js/doc.js"></script>
  <script src="/javascript/LocalResizeIMG.js"></script>
  <script src="/javascript/mobileBUGFix.mini.js"></script>
  <script>
	$(function(){
		$("#upload").on("click",function(){
			$("#upload_input").trigger('click');
		});
		
		$('#upload_input').localResizeIMG({
	        width: 600,
	        quality: 0.5,
	        before: function(){
	       	 $("#upload").prev().html('<img id="my_img" src="/image/loading.gif" alt="test"/>');
	        },
	        success: function (result) {
	        var img = new Image();
	        img.src = result.base64;
	        var name = result.name;
	
	        console.log(result);
	        
	      //发送到服务端
	        $.post('upload.php',{'name':name,formFile : result.base64.substr(22) },function(data){
	       		$("#my_img").attr("src","upload/"+data);
	        });
	        }
	    });
	});
</script>
</body>
</html>